<template>
	<el-card shadow="never" header="个人信息" v-loading="showloading === true">
		<el-form ref="form" :model="form" label-width="120px" style="margin-top:20px;">
			<el-form-item label="姓名">
				<el-input v-model="form.username" disabled></el-input>
				<!--				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>-->
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.mobile" disabled></el-input>
			</el-form-item>
			<!--			<el-form-item>-->
			<!--				<el-button type="primary">保存</el-button>-->
			<!--			</el-form-item>-->
		</el-form>
	</el-card>
	<!--	<el-card shadow="never" header="主题" style="margin-top:20px;">-->
	<!--		<el-form ref="form" label-width="120px" style="margin-top:20px;">-->
	<!--			<el-form-item :label="$t('user.nightmode')">-->
	<!--				<el-switch v-model="config.dark" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny"></el-switch>-->
	<!--				<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>-->
	<!--			</el-form-item>-->
	<!--			<el-form-item label="主题颜色">-->
	<!--				<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>-->
	<!--			</el-form-item>-->
	<!--		</el-form>-->
	<!--	</el-card>-->
</template>

<script>
import colorTool from "@/utils/color";

export default {
	data() {
		return {
			showloading: false,
			form: {},
			colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
			config: {
				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
				dark: this.$TOOL.data.get('APP_DARK') || false,
				colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF',
				autoExit: this.$TOOL.data.get('AUTO_EXIT') || 0,
			}
		}
	},
	watch: {
		'config.dark'(val) {
			if (val) {
				document.documentElement.classList.add("dark")
				this.$TOOL.data.set("APP_DARK", val)
			} else {
				document.documentElement.classList.remove("dark")
				this.$TOOL.data.remove("APP_DARK")
			}
		},
		'config.colorPrimary'(val) {
			if (!val) {
				val = '#409EFF'
				this.config.colorPrimary = '#409EFF'
			}
			document.documentElement.style.setProperty('--el-color-primary', val);
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val, i / 10));
			}
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val, i / 10));
			}
			this.$TOOL.data.set("APP_COLOR", val);
		},
		'config.autoExit'(val) {
			if (val == 0) {
				this.$TOOL.data.remove("AUTO_EXIT")
			} else {
				this.$TOOL.data.set("AUTO_EXIT", val)
			}
		},
	},
	mounted() {
		this.getUserInfo()
	},
	methods: {
		async getUserInfo() {
			this.showloading = true;
			let res = await this.$API['admin.user'].info.get();
			this.showloading = false;
			this.form = res.data;
		},
		openPage(item) {
			this.page = item.index
		},
	}
}
</script>

<style>
</style>
